<template>
  <el-carousel indicator-position="outside">
    <el-carousel-item v-for="carousel in carouselList" :key="carousel.id">
      <h3 class="small justify-center" text="2xl">
        <img :src="carousel.appAdvertiseUrl" alt="" />
      </h3>
    </el-carousel-item>
  </el-carousel>

  <el-affix style="height: 80px; margin: 0 auto; position: relative" :offset="0">
    <ul class="navBar">
      <li :class="$route.path.includes('/recommend') ? 'active' : ''">
        <RouterLink to="/home/recommend">推荐</RouterLink>
      </li>

      <li :class="$route.path.includes('/production') ? 'active' : ''">
        <RouterLink to="/home/production">作品</RouterLink>
      </li>

      <li :class="$route.path.includes('/tutorial') ? 'active' : ''">
        <RouterLink to="/home/tutorial">教程</RouterLink>
      </li>

      <li :class="$route.path.includes('/special') ? 'active' : ''">
        <RouterLink to="/home/special">专题</RouterLink>
      </li>

      <li :class="$route.path.includes('/dynamic') ? 'active' : ''">
        <RouterLink to="/home/dynamic">动态</RouterLink>
      </li>

      <li :class="$route.path.includes('/attention') ? 'active' : ''">
        <RouterLink to="/home/attention">关注</RouterLink>
      </li>
    </ul>
    <div class="interest" @click="dialogVisible = true">
      <span>
        <el-icon><Operation /></el-icon>
        选择兴趣技能
      </span>
    </div>
  </el-affix>

  <el-dialog v-model="dialogVisible" title="选择我的兴趣技能" width="70%">
    <el-input
      placeholder="搜索兴趣技能"
      :prefix-icon="Search"
      style="width: 25%; margin-right: 15px"
    ></el-input>
    <el-button size="default">搜索</el-button>
    <p style="margin-top: 20px">推荐感兴趣技能</p>

    <div style="margin-top: 20px; height: 280px; overflow: auto" v-infinite-scroll="load">
      <el-tag
        style="padding: 20px 30px; color: #333; margin: 0 20px 20px 0"
        class="mx-1"
        size="large"
        type="info"
        effect="plain"
        v-for="item in interestList"
        :key="item.id"
        >{{ item.name }}</el-tag
      >
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </span>
    </template>
  </el-dialog>

  <router-view />
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "home",
});
</script>

<script setup lang="ts">
import { ref, watch } from "vue";
import { getCarouselRequest, getInterestListRequest } from "@/api";
import type { carouselReturn } from "@/api";
import { Search } from "@element-plus/icons-vue";

// 轮播图资源
let carouselList = ref<carouselReturn[]>([]);
async function getCarousel() {
  const res = await getCarouselRequest();
  // console.log(res);
  carouselList.value = res;
}
getCarousel();

// 兴趣列表
let interestList = ref<any>([]);
let pageNum = ref(0);
let pageSize = ref(20);
const getInterestList = async () => {
  const res = await getInterestListRequest(pageNum.value, pageSize.value);
  interestList.value = res.content;
};
getInterestList();

let dialogVisible = ref(false);

const load = () => {
  pageNum.value += 1;
};

watch(pageNum, async () => {
  const res = await getInterestListRequest(pageNum.value, pageSize.value);
  // console.log(res.content);
  interestList.value.push(...res.content);
});
</script>

<style lang="less" scoped>
.el-carousel {
  width: 1200px;
  height: 466px;
  margin: 20px auto 0;
  position: relative;
  :deep(.el-carousel__container) {
    height: 466px;
    .el-carousel__item {
      h3 {
        display: flex;
        img {
          width: 1200px;
          height: 466px;
        }
      }
    }
  }
  :deep(.el-carousel__indicators--outside) {
    position: absolute;
  }
}

:deep(.el-affix--fixed) {
  background-color: #fff;
}

.navBar {
  width: 1000px;
  height: 80px;
  margin: 0 auto;

  li {
    list-style: none;
    float: left;
    padding: 20px 30px;
    margin: 0 20px;

    a {
      color: #7d8090;
    }

    &.active {
      color: #111;
      border-bottom: 2px solid #111;
    }
  }
}

.interest {
  position: absolute;
  right: 180px;
  top: 20px;
}
</style>
